<template>
  <div class="show">
    <blogItem v-for="item in listArr" :key="item.id" :itemObj="item"/>
    <div class="pageGroup">
      <div class="btn" @click="clickLeft">&lt;上一页</div>
      <div class="btn" @click="clickRight">下一页&gt;</div>
    </div>
    <div class="mask" v-show="showMask">
      数据加载中...
    </div>
  </div>
</template>

<script>
import blogItem from '@/components/blogItem'
export default {
  data () {
    return {
      listArr: [],
      page: 1,
      showMask: false
    }
  },
  components: {
    blogItem
  },
  created () {
    this.getData()
  },
  methods: {
    clickLeft () {
      if (this.page <= 1) {
        alert('这是第一页')
        return
      }
      this.page--
      this.getData()
      this.getData()
      this.scrTop()
      this.showMask = true
    },
    clickRight () {
      if (this.listArr.length < 9 || this.listArr.length == 0) {
        alert('这是最后一页')
        return
      }
      this.page++
      this.getData()
      // setTimeout(()=>{
      //   this.getData();
      // },1000)
      this.scrTop()
      this.showMask = true
    },
    getData () {
      this.axios({
        params: {
          page: this.page
        },
        url: 'https://ku.qingnian8.com/dataApi/blog/showBlog.php'
      }).then(res => {
        // console.log(res)
        this.showMask = false
        this.listArr = res.data
      })
    },
    scrTop () {
      if (document.body.scrollTop) {
        document.body.scrollTop = 0
      } else {
        document.documentElement.scrollTop = 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
.show{
  padding: 30px 25px 0;
  .pageGroup{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    .btn{
      border: 1px solid rgb(66,185,131);
      padding: 10px;
      color: #42b983;
      margin-left: 20px;
      cursor: pointer;
      transition: 0.3s;
      &:hover{
        background-color:  #42b983;
        color: white;
      }
    }
  }
  .mask{
    position: fixed;
    color: white;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
